<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 登录日志
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-table
                    :data="loginLogs.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                    border
                    class="table"
                    ref="multipleTable"
                    header-cell-class-name="table-header"

            >
                <el-table-column label="ID" align="center">
                    <template slot-scope="scope">
                        {{scope.row.userId}}
                    </template>
                </el-table-column>
                <el-table-column label="用户名">
                    <template slot-scope="scope">
                        {{scope.row.username}}
                    </template>
                </el-table-column>

                <el-table-column label="登录时间">
                    <template slot-scope="scope">
                        {{scope.row.loginTime}}
                    </template>
                </el-table-column>
                <el-table-column label="登录地IP">
                    <template slot-scope="scope">
                        {{scope.row.ip}}
                    </template>
                </el-table-column>

                <el-table-column label="登录浏览器">
                    <template slot-scope="scope">
                        {{scope.row.browser}}
                    </template>
                </el-table-column>
                <el-table-column label="登录操作系统">
                    <template slot-scope="scope">
                        {{scope.row.os}}
                    </template>
                </el-table-column>


                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-button
                                type="text"
                                icon="el-icon-delete"
                                style="color: red"
                                class="red"
                                @click="handleDelete(scope.row.loginTime)"
                        >删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div class="pagination">
                <el-pagination
                        :current-page.sync="currentPage"
                        :page-size="pageSize"
                        :pager-count="7"
                        :total="loginLogs.length"
                        background
                        layout="total, prev, pager, next, jumper">
                </el-pagination>
            </div>

        </div>
    </div>
</template>

<script>
    import { deleteLoginLog, getLoginLogs } from '../../api/user';
    import { hasMenu, hasPermission, permissionListContain } from '../../utils/authority';

    export default {
        name: 'LoginLog',

        created() {
            this.fetchData();
        },
        data() {
            return {
                total: 0,
                currentPage: 1,
                pageSize: 8,
                pageNum: 1,
                loginLogs: []
            };
        },
        methods: {
            handlePageChange(pageNum) {
                this.fetchData(pageNum);
            },
            permissionContain(permissionList) {
                return permissionListContain(permissionList);
            },
            hasPermission(permission) {
                return hasPermission(permission);
            },
            hasMenu(menuCode) {
                return hasMenu(menuCode);
            },
            handleDelete(loginTime) {
                // 二次确认删除
                this.$confirm('确定要删除吗？', '提示', {
                    type: 'warning'
                })
                    .then(() => {
                        deleteLoginLog({
                            key: loginTime
                        }).then(res => {
                            if (res.data.resultCode === 204) {
                                this.$message.success('删除成功');
                                this.fetchData();
                            } else {
                                this.$message.error('删除失败');
                            }
                        });

                    })
                    .catch(() => {
                    });
            },
            fetchData() {
                getLoginLogs().then(res => {
                    this.loginLogs = res.data.data;
                });
            }
        }
    };
</script>

<style scoped>

</style>
